/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-04-26 15:18:18
 * @LastEditTime : 2023-06-20 09:54:52
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Router\MenuNav\DiyList\Theme\ThemeTypeList.jsx
 * @Description  :
 */
/**
 * ! 样式预览列表
 */
import '../Scss/ThemeTypeList.scss'
import { BackImageUrl, WebThemeBackImage } from './Common'

export const ThemeTypeData = ({ type, theme, img }) => {
    const ThemeTypeList = {
        ThemeTypeList001,
        ThemeTypeList002,
    }
    return (
        <>
            {(() => {
                const Template = ThemeTypeList[type]
                return <Template img={img} theme={theme} />
            })()}
        </>
    )
}

export const ThemeTypeDescriptive = {
    ThemeTypeList001: {
        title: '默认主题',
        content: '通过背景图片或主题的基础颜色与覆盖层的高斯透明,实现视觉上的主题颜色.',
    },
    ThemeTypeList002: {
        title: '复制主题',
        content: '默认主题的复制文件,临时扩充数组的假数据.',
    },
}

const ThemeTypeList001 = ({ img, theme }) => {
    return (
        <div className="ThemeTypeList001" style={{ '--theme': theme }}>
            {img ? <img src={`${BackImageUrl}${WebThemeBackImage[img]}`} alt="" /> : <div className="theme" />}

            <div className="Theme">
                <div className="head">HEAD</div>
                <div className="Box">
                    <div className="menu">MENU</div>
                    <div className="body">BODY</div>
                </div>
            </div>
        </div>
    )
}

const ThemeTypeList002 = ({ img, theme }) => {
    return (
        <div className="ThemeTypeList001" style={{ '--theme': theme }}>
            {img ? <img src={`${BackImageUrl}${WebThemeBackImage[img]}`} alt="" /> : <div className="theme" />}

            <div className="Theme">
                <div className="head">HEAD</div>
                <div className="Box">
                    <div className="menu">MENU</div>
                    <div className="body">BODY</div>
                </div>
            </div>
        </div>
    )
}
